<template>
    <div>
        <el-row id="headerRow" type="flex" :gutter="20" justify="end" align="middle">
            <el-col :span="4">
                <el-input v-model="queryName" @keyup.enter.native="doQuery" placeholder="请输入关键字查找"
                    size="small"></el-input>
            </el-col>
            <el-col :span="2">
                <el-button id="front" @click="doQuery" type="success" icon="el-icon-search" size="small">搜索</el-button>
            </el-col>
            <el-col :span="1">
                <el-badge value="1" class="item">
                    <img src="@/assets/images/lindang.jpg" />
                </el-badge>
            </el-col>
            <el-col :span="1.5">
                <div v-if="(user === null)">
                    <el-button type="success" size="small" @click="toLogin">注册/登录</el-button>
                </div>
                <div v-else>
                    <el-dropdown @command="handleCommend">
                        <span class="el-dropdown-link">
                            <el-tag type="success" slot="reference">{{ "欢迎您: " + user.nickname }}
                            </el-tag>
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="toUserInfo">个人中心</el-dropdown-item>
                            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                </div>
            </el-col>
            <el-col :span="1">
                <el-avatar :size="50" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
                </el-avatar>
            </el-col>
            <el-col :span="2">
            </el-col>
        </el-row>
        <el-row type="flex" justify="center">
            <navbar></navbar>
        </el-row>
    </div>
</template>

<script>
import navbar from "@/components/front/Navbar.vue";
import router from "@/router";
// import { json } from "body-parser";
import { logout } from "@/api/userApi";
const options = {
    components: {
        navbar
    },
    computed: {
        user() {
            return this.$store.state.user ?? JSON.parse(localStorage.getItem("user"));
        }
    },
    methods: {
        doQuery() {
            console.log("do query");
            this.$store.commit("setFrontQuery", { name: this.queryName });
            router.push("/front/home");
        },
        toLogin() {
            console.log("toLogin");
            router.push("/front/login");
        },
        handleCommend(command) {
            switch (command) {
                case "toUserInfo":
                    this.toUserInfo();
                    break;
                case "logout":
                    this.handleLogout();
                    break;
            }

        },
        toUserInfo() {
            // console.log("->个人中心");
            router.push("/front/userInfo");
        },
        handleLogout() {
            let that = this;
            logout().then(resp => {
                localStorage.removeItem("user");
                that.$store.commit("setUser", null);
                that.$message.success(resp.data.data);
                router.go(0);
            }).catch(err => {
                that.$message.error(err);
            })
        }
    },
    data() {
        return {
            queryName: ''
        }
    }
}

export default options;
</script>
<style>
#front {
    border-radius: 20px;
    border-color: #b7d883;
}

#headerRow {
    background-image: url("@/assets/images/logo.jpg");
    background-repeat: no-repeat;
    background-size: contain;
}
</style>